<template>
  <div>
    <div class="keyDetail-filter">
      <div class="filter-type">
        <div class="type-div" @click="selectTimeSpace">
          <span>{{ timeValue }}</span><i></i>
        </div>
        <div class="type-div" @click="selectSourceType">
          <span>类型</span><i></i>
        </div>
        <div class="type-div" @click="selectEmotion">
          <span>情感</span><i></i>
        </div>
        <div class="type-div" @click="selectTimeSort">
          <span>{{ sortValue }}</span><i></i>
        </div>
      </div>
    </div>
    <div class="key-all-info">
      <span>全部(1111)</span>
    </div>
    <ul class="keyinfo-list">
      <li v-for="(item,index) in likeList" :key="index">
        <div class="like-user">
          <div class="user-logo"></div>
          <div class="user-name">
            <span>{{ item.name }}</span>
            <p>{{ item.time }}</p>
          </div>
        </div>
        <div class="user-title">
          <p class="bold">{{ item.title }}</p>
        </div>
        <div class="user-information">
          <p>{{ item.content }}</p>
        </div>
        <div class="user-source">
          <p>来源：{{ item.source }}</p>
          <div class="user-collection" @click="confirmCollection(index)"
               :class="{'real-collection':isCollection[index]}">
            <i></i><span>收藏</span>
          </div>
        </div>
      </li>
    </ul>
    <mt-popup v-model="popupTime" popup-transition="popup-fade" class="mint-popup-2">
      <mt-radio
        align="right"
        v-model="timeRadio"
        :options="timeList">
      </mt-radio>
      <mt-button type="default" @click.native="timeCancel">取消</mt-button>
      <mt-button type="primary" @click.native="timeConfirm">确定</mt-button>
    </mt-popup>
    <mt-popup v-model="popupType" popup-transition="popup-fade" class="mint-popup-2">
      <mt-checklist
        align="right"
        v-model="typeCheck"
        :options="typeList">
      </mt-checklist>
      <mt-button type="default" @click.native="typeCancel">取消</mt-button>
      <mt-button type="primary" @click.native="typeConfirm">确定</mt-button>
    </mt-popup>
    <mt-popup v-model="popupEmotion" popup-transition="popup-fade" class="mint-popup-2">
      <mt-checklist
        align="right"
        v-model="emotionCheck"
        :options="emotionList">
      </mt-checklist>
      <mt-button type="default" @click.native="emotionCancel">取消</mt-button>
      <mt-button type="primary" @click.native="emotionConfirm">确定</mt-button>
    </mt-popup>
    <mt-popup v-model="popupSort" popup-transition="popup-fade" class="mint-popup-2">
      <mt-radio
        align="right"
        v-model="sortRadio"
        :options="sortList">
      </mt-radio>
      <mt-button type="default" @click.native="sortCancel">取消</mt-button>
      <mt-button type="primary" @click.native="sortConfirm">确定</mt-button>
    </mt-popup>
  </div>
</template>

<script>
  export default {
    name: "keywordInformation",
    data() {
      return {
        isCollection: [],
        popupTime: false,
        popupSort: false,
        popupEmotion: false,
        popupType: false,
        timeValue: '今天',
        typeValue:[],
        emotionValue:[],
        sortValue: '降序',
        timeRadio: '今天',
        sortRadio: '降序',
        typeCheck:[],
        emotionCheck:[],
        timeList: [{
          label: '今天',
          value: '今天'
        }, {
          label: '24小时',
          value: '24小时'
        }, {
          label: '2天',
          value: '2天'
        }, {
          label: '3天',
          value: '3天'
        }, {
          label: '7天',
          value: '7天'
        }, {
          label: '10天',
          value: '10天'
        }, {
          label: '一个月',
          value: '一个月'
        }],
        sortList:[{
          label: '降序',
          value: '降序'
        },{
          label: '升序',
          value: '升序'
        }],
        typeList:[{
          label: '微博',
          value: '微博'
        },{
          label: '论坛',
          value: '论坛'
        },{
          label: '网站',
          value: '网站'
        },{
          label: '微信',
          value: '微信'
        },{
          label: '客户端',
          value: '客户端'
        },{
          label: '新闻',
          value: '新闻'
        },{
          label: '政务',
          value: '政务'
        },{
          label: '外媒',
          value: '外媒'
        }],
        emotionList:[{
          label: '正面',
          value: '正面'
        },{
          label: '中性',
          value: '中性'
        },{
          label: '负面',
          value: '负面'
        }],
        likeList: [{
          id: 111,
          name: '测试员1',
          time: '2018.05.03 11:34',
          title: '特朗普将被刻成冰雕，环保组织：气候变暖了解一下特朗普将被刻成冰雕',
          content: '特朗普将被刻成冰雕，环保组织：气候变暖了解一下,特朗普将被刻成冰雕，环保组织：气候变暖了解一下特朗普将被刻成冰雕，环保组织：气候变暖了解一下,特朗普将被刻成冰雕，环保组织：气候变暖了解一下特朗普将被刻成冰雕，环保组织：气候变暖了解一下,特朗普将被刻成冰雕，环保组织：气候变暖了解一下',
          source: '百度百家'
        }, {
          id: 222,
          name: '测试员2',
          time: '2018.05.03 11:34',
          title: '特朗普将被刻成冰雕，环保组织：气候变暖了解一下特朗普将被刻成冰雕',
          content: '特朗普将被刻成冰雕，环保组织：气候变暖了解一下,特朗普将被刻成冰雕，环保组织：气候变暖了解一下特朗普将被刻成冰雕，环保组织：气候变暖了解一下,特朗普将被刻成冰雕，环保组织：气候变暖了解一下特朗普将被刻成冰雕，环保组织：气候变暖了解一下,特朗普将被刻成冰雕，环保组织：气候变暖了解一下',
          source: '百度百家'
        }, {
          id: 333,
          name: '测试员3',
          time: '2018.05.03 11:34',
          title: '特朗普将被刻成冰雕，环保组织：气候变暖了解一下特朗普将被刻成冰雕',
          content: '特朗普将被刻成冰雕，环保组织：气候变暖了解一下,特朗普将被刻成冰雕，环保组织：气候变暖了解一下特朗普将被刻成冰雕，环保组织：气候变暖了解一下,特朗普将被刻成冰雕，环保组织：气候变暖了解一下特朗普将被刻成冰雕，环保组织：气候变暖了解一下,特朗普将被刻成冰雕，环保组织：气候变暖了解一下',
          source: '百度百家'
        }, {
          id: 444,
          name: '测试员4',
          time: '2018.05.03 11:34',
          title: '特朗普将被刻成冰雕，环保组织：气候变暖了解一下特朗普将被刻成冰雕',
          content: '特朗普将被刻成冰雕，环保组织：气候变暖了解一下,特朗普将被刻成冰雕，环保组织：气候变暖了解一下特朗普将被刻成冰雕，环保组织：气候变暖了解一下,特朗普将被刻成冰雕，环保组织：气候变暖了解一下特朗普将被刻成冰雕，环保组织：气候变暖了解一下,特朗普将被刻成冰雕，环保组织：气候变暖了解一下',
          source: '百度百家'
        }]
      }
    },
    props:['boxStatus'],
    methods: {
      confirmCollection(index) {
        if (this.isCollection[index]) {
          return false
        }
        this.$set(this.isCollection, index, true);
        this.$toast({
          message: '收藏成功',
          className: 'new-toast',
          duration: 1000
        });
      },
      selectTimeSpace() {
        this.popupTime = true;
      },
      timeConfirm() {
        this.popupTime = false;
        this.timeValue = this.timeRadio;
      },
      timeCancel() {
        this.popupTime = false;
        this.timeRadio = this.timeValue;
      },
      selectSourceType() {
        this.popupType = true;
      },
      typeConfirm() {
        this.popupType = false;
        this.typeValue = this.typeCheck
      },
      typeCancel() {
        this.popupType = false;
        this.typeCheck = this.typeValue
      },
      selectEmotion() {
        this.popupEmotion = true;
      },
      emotionConfirm() {
        this.popupEmotion = false;
        this.emotionValue = this.emotionCheck
      },
      emotionCancel() {
        this.popupEmotion = false;
        this.emotionCheck = this.emotionValue
      },
      selectTimeSort() {
        this.popupSort = true;
      },
      sortConfirm() {
        this.popupSort = false;
        this.sortValue = this.sortRadio;
      },
      sortCancel() {
        this.popupSort = false;
        this.sortRadio = this.sortValue;
      }
    },
    watch:{
      'boxStatus': function () {
        this.popupTime = false;
        this.popupType = false;
        this.popupEmotion = false;
        this.popupSort = false;
        this.timeRadio = this.timeValue;
        this.typeCheck = this.typeValue;
        this.emotionCheck = this.emotionValue;
        this.sortRadio = this.sortValue;
      }
    }
  }
</script>

<style scoped lang="less">

  .keyDetail-filter {
    width: 100%;
    background-color: #fff;
    height: 66px;
    margin-top: 20px;
    box-shadow: 0 2px 6px rgba(8, 41, 85, 0.08);
    .filter-type {
      margin: 0 15px;
      height: 66px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .type-div {
        position: relative;
        width: 178px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px; /*px*/
        color: #0c0c0c;
        i {
          width: 26px;
          height: 26px;
          display: inline-block;
          background: url("../../assets/monitor/list-sicon@2x.png") no-repeat center;
          background-size: 26px 26px;
          vertical-align: middle;
        }
      }
      .type-div + .type-div {
        border-left: 2px solid #cdcdcd; /*px*/
      }
    }
  }

  [data-dpr='3'] .keyDetail-filter {
    .filter-type .type-div i {
      background: url("../../assets/monitor/list-sicon@3x.png") no-repeat center;
      background-size: 26px 26px;
    }
  }

  .key-all-info {
    width: 100%;
    height: 82px;
    margin-top: 20px;
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(8, 41, 85, 0.08);
    display: flex;
    align-items: center;
    span {
      font-size: 30px; /*px*/
      color: #0c0c0c;
      padding-left: 15px;
    }
  }

  [data-dpr='3'] .keyinfo-list li {
    .like-user .user-logo {
      background: url("../../assets/monitor/default_head@3x.png") no-repeat center;
      background-size: 78px 78px;
    }
    .user-source {
      .user-collection i {
        background: url("../../assets/monitor/list_like_default@2x.png") no-repeat center;
        background-size: 40px 34px;
      }
      .real-collection i {
        background: url("../../assets/monitor/list_like@2x.png") no-repeat center;
        background-size: 40px 34px;
      }
    }

  }

  .keyinfo-list {
    margin: 24px 13px 0 13px;
    transition: all .4s ease;
    li {
      position: relative;
      background-color: #fff;
      border-radius: 8px;
      margin-bottom: 24px;
      box-shadow: 0 0 10px rgba(8, 41, 85, 0.12);
      .circle {
        position: absolute;
        top: 50%;
        left: -66px;
        transform: translateY(-50%);
        overflow: hidden;
        .circle-input {
          display: none;
        }
        .circle-core {
          display: inline-block;
          position: relative;
          width: 42px;
          height: 42px;
          border-radius: 100%;
          border: 4px solid #f7701e;
        }
        .circle-input:checked + .circle-core {
          background-color: #f7701e;
          &::after {
            border-color: #fff;
            transform: rotate(45deg) scale(1);
          }
        }
        .circle-core::after {
          border: 4px solid #fff;
          border-left: 0;
          border-top: 0;
          content: "";
          position: absolute;
          width: 12px;
          height: 24px;
          top: 4px;
          left: 14px;
          transform: rotate(45deg) scale(0);
          transition: transform 0.2s;
        }
      }
      .like-user {
        display: flex;
        overflow: hidden;
        padding: 20px 15px 20px 15px;
        .user-logo {
          width: 78px;
          height: 78px;
          background: url("../../assets/monitor/default_head@2x.png") no-repeat center;
          background-size: 78px 78px;
        }
        .user-name {
          display: flex;
          justify-content: center;
          flex-direction: column;
          padding-left: 15px;
          span {
            font-size: 30px; /*px*/
            color: #0c0c0c;
          }
          p {
            font-size: 24px; /*px*/
            color: #999;
          }
        }
      }
      .user-title {
        text-align: justify;
        font-size: 34px; /*px*/
        color: #222;
        padding: 0 15px 24px 15px;
      }
      .user-information {
        text-align: justify;
        color: #888;
        line-height: 42px;
        padding: 25px 15px;
        background-color: #f7f7f7;
      }
      .user-source {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 15px;
        line-height: 74px;
        font-size: 24px; /*px*/
        color: #c5c4c4;
        .user-collection {
          font-size: 28px; /*px*/
          color: #333;
          padding-right: 15px;
          i {
            display: inline-block;
            width: 40px;
            height: 34px;
            background: url("../../assets/monitor/list_like_default@2x.png") no-repeat center;
            background-size: 40px 34px;
            vertical-align: middle;
            margin-bottom: 10px;
          }
        }
        .real-collection {
          color: #fba602;
          i {
            background: url("../../assets/monitor/list_like@2x.png") no-repeat center;
            background-size: 40px 34px;
          }
        }
      }
    }
  }

  .mint-popup-2 {
    width: 600px;
    padding: 20px 15px;
    border-radius: 8px;
  }

</style>
